module.exports = Canvas

function Canvas(ele) {
  this.nowBlock = {}
  this.canvas = ele
  this.ctx = this.canvas.getContext('2d')
  this.blockList = []
  // flag
  this.mousedownTimestamp = 0
  this.clickStop = false
  this.clickStopInterval = 800
  // 事件绑定
  this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
  this.canvas.addEventListener('mouseup', this.mouseupEvent.bind(this))
  this.canvas.addEventListener('click', this.click.bind(this))
}
Canvas.prototype = {
  // blockList: [],
  // ctx: '',
  // canvas: '',
  // nowBlock: {},
  createBlock(option = {}) {
    option.hierarchy = this.blockList.length
    option.Canvas = this
    this.blockList.push(new Block(option))
    this.painting()
  },
  rendering(block = Block) {
    this.ctx.fillStyle = block.color
    this.ctx.fillRect(block.x, block.y, block.w, block.h)
  },
  painting() {
    // 清空画布
    this.ctx.fillStyle = '#fff'
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
    this.blockList.forEach(ele => {
      this.rendering(ele)
    })
  },
  /* handle(e = Event) {
    switch (e.type) {
      case 'mousedown':
        this.mousedownEvent(e)
        break
      case 'click':
        this.click(e)
        break
      default:
        console.log('no handle...')
    }
  },*/
  click(e = Event) {
    if (this.clickStop) {
      console.log('[click]click is Stop')
      return
    }
    // 获取点中里层级最高的色块
    this.nowBlock = this.getCurrentBlock(e)
    // 如果没有捕获的色块直接退出
    if (!this.nowBlock) return
    // 将点击到的色块层级提高到最高
    this.nowBlock.hierarchy = this.blockList.length
    this.resortBlockHierarchy()
    this.nowBlock.click(e)
  },
  mouseupEvent(e = Event) {
    const mouseupTimestamp = new Date().getTime()
    console.log('[mouseupEvent]', e, mouseupTimestamp, this.mousedownTimestamp, mouseupTimestamp - this.mousedownTimestamp)
    // this.stopClick()
    if (this.clickStopInterval <= (mouseupTimestamp - this.mousedownTimestamp)) {
      this.stopClick()
    }
  },
  stopClick(time = 500) {
    this.clickStop = true
    const that = this
    setTimeout(function() {
      that.clickStop = false
    }, time)
  },
  mousedownEvent(e = Event) {					// 点击事件
    this.mousedownTimestamp = new Date().getTime()
    // 获取点中里层级最高的色块
    this.nowBlock = this.getCurrentBlock(e)
    // 如果没有捕获的色块直接退出
    if (!this.nowBlock) return
    // 将点击到的色块层级提高到最高
    this.nowBlock.hierarchy = this.blockList.length
    this.resortBlockHierarchy()
    this.nowBlock.mousedownEvent(e)
    // this.blockList.forEach(ele => {
    //   if (ele.checkBoundary(x, y)) ele.clickEvent(e)
    // })
  },
  resortBlockHierarchy() {
    // 重新排序(从小到大)
    this.blockList.sort((a, b) => a.hierarchy - b.hierarchy)
    // 在重新从0开始分配层级
    // eslint-disable-next-line no-return-assign
    this.blockList.forEach((ele, idx) => ele.hierarchy = idx)
    // 重新倒序排序后再重新渲染。
    this.painting()
  },
  /**
   * 获取点中里层级最高的色块
   * */
  getCurrentBlock(e = Event) {
    const x = e.offsetX
    const y = e.offsetY
    // console.log('Canvas.mousedownEvent ... ', x, y)
    // 获取点中里层级最高的色块
    return (this.blockList.filter(ele => ele.checkBoundary(x, y))).pop()
  }
  // constructor(ele) {
  //   this.canvas = ele
  //   this.ctx = this.canvas.getContext('2d')
  //   this.blockList = []
  //   // 事件绑定
  //   this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
  // }
}

function Block({ w, h, x, y, color, Canvas, hierarchy }) {
  this.w = w
  this.h = h
  this.x = x
  this.y = y
  this.color = color
  this.Canvas = Canvas
  this.hierarchy = hierarchy
}
Block.prototype = {
  // w: number
  // h: number
  // x: number
  // y: number
  // color: string
  // Canvas: Canvas
  // hierarchy: number
  // constructor({ w, h, x, y, color, Canvas, hierarchy }) {
  //   this.w = w
  //   this.h = h
  //   this.x = x
  //   this.y = y
  //   this.color = color
  //   this.Canvas = Canvas
  //   this.hierarchy = hierarchy
  // }
  checkBoundary(x, y) {
    return x > this.x && x < (this.x + this.w) && y > this.y && y < (this.y + this.h)
  },
  mousedownEvent(e = Event) {
    const disX = e.offsetX - this.x
    const disY = e.offsetY - this.y
    // console.log('Block.mousedownEvent ...', e.offsetX, e.offsetY, this.x, this.y)
    // console.log('Block.mousedownEvent ...', disX, disY)
    document.onmousemove = (mouseEvent) => {
      this.x = mouseEvent.offsetX - disX
      this.y = mouseEvent.offsetY - disY
      this.x = this.setXLimit(this.x)
      this.y = this.setYLimit(this.y)
      // console.log('Block.onmousemove ...', this.Canvas.canvas, mouseEvent.offsetX, mouseEvent.offsetY, this.x, this.y)
      this.Canvas.painting()
    },
    document.onmouseup = () => {
      document.onmousemove = document.onmousedown = null
    }
    console.log(`[mousedownEvent]点击了颜色为${this.color}的色块22`)
  },
  click(e = Event) {
    console.log(`[click]点击了颜色为${this.color}的色块22`)
  },
  setXLimit(x = Number) {
    const offsetLeft = this.Canvas.canvas.offsetLeft
    const canvasW = this.Canvas.canvas.width
    const maxX = canvasW + offsetLeft - this.w
    x = x < 0 ? 0 : x
    x = x > maxX ? maxX : x
    return x
  },
  setYLimit(y = Number) {
    const offsetTop = this.Canvas.canvas.offsetTop
    const canvasH = this.Canvas.canvas.height
    const maxY = canvasH + offsetTop - this.h
    y = y > maxY ? maxY : y
    y = y < 0 ? 0 : y
    return y
  }
}
